<template>
    <div class="yizhan">
        <div class="shuru">
            驿站名称 : <el-input style="width: 200px" v-model="input1" placeholder="请输入驿站名称"></el-input>
            小区名称 : <el-input style="width: 200px" v-model="input2" placeholder="请输入小区名称"></el-input>
        </div>
        <div class="timebox">
            <span class="demonstration">添加时间 : </span>
            <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd 00:00:00">

            </el-date-picker>
            <el-button type="primary" @click="search">搜索</el-button>
        </div>

        <div class="anniu">
            <el-button type="primary" @click="dialogFormVisible = true">添加驿站</el-button>
            <el-dialog title="驿站" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="驿站名字" :label-width="formLabelWidth">
                        <el-input type="text" placeholder="请输入驿站名称" v-model="form.name1" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="驿站图片" :label-width="formLabelWidth">
                        <el-upload
                                class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="3"
                                :on-exceed="handleExceed"
                                :file-list="fileList">
                            <el-button size="small" type="primary">+</el-button>
                            <div slot="tip" class="el-upload__tip"></div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="所属地区" :label-width="formLabelWidth">
                        <el-cascader
                                :options="addressAll"
                                clearable
                                v-model="address1"
                                :props="{value:'label'}"
                        ></el-cascader>
                        <el-input style="padding-top: 20px" type="text" placeholder="请填写详细地址" v-model="form.name2" autocomplete="off"></el-input>
                    </el-form-item>

<!--                    ---------------------------------------------->
                    <el-form-item label="所属小区" :label-width="formLabelWidth">

                        <el-select v-model="xiaoquaddress1" placeholder="请选择">
                            <el-option
                                    v-for="(item,i) in xiqoquaddressAll"
                                    :key="i"
                                    :label="item.label"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addyizhan">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div class="anniu">
            <el-dialog title="驿站" :visible.sync="dialogFormVisible001">
                <el-form :model="form">
                    <el-form-item label="驿站名字" :label-width="formLabelWidth">
                        <el-input type="text" placeholder="请输入驿站名称" v-model="form.name1" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="驿站图片" :label-width="formLabelWidth">
                        <el-upload
                                class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                multiple
                                :limit="3"
                                :on-exceed="handleExceed"
                                :file-list="fileList">
                            <el-button size="small" type="primary">+</el-button>
                            <div slot="tip" class="el-upload__tip"></div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="所属地区" :label-width="formLabelWidth">
                        <el-cascader
                                :options="addressAll"
                                clearable
                                v-model="address1"
                                :props="{value:'label'}"
                        ></el-cascader>
                        <el-input style="padding-top: 20px" type="text" placeholder="请填写详细地址" v-model="form.name2" autocomplete="off"></el-input>
                    </el-form-item>

                    <!--                    ---------------------------------------------->
                    <el-form-item label="所属小区" :label-width="formLabelWidth">

                        <el-select v-model="xiaoquaddress1" placeholder="请选择">
                            <el-option
                                    v-for="(item,i) in xiqoquaddressAll"
                                    :key="i"
                                    :label="item.label"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible001 = false">取 消</el-button>
                    <el-button type="primary" @click="xiugai">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <div class="content">
            <el-table
                    :data="allYizhan.list"
                    border
                    style="width: 1200px"
                    color:black
                    :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}">
                <el-table-column
                        fixed
                        prop="courierStationId"
                        label="ID"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="courierStationName"
                        label="驿站名字"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="courierStationImage"
                        label="驿站照片"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="courierStationProvince"
                        label="驿站地址"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="courierStationCommunityName"
                        label="所在小区"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="courierStationOrderCount"
                        label="订单总数"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="addTime"
                        label="添加时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="courierStationStatus"
                        label="状态"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.courierStationStatus === '上架'" @click="XiaJiaClick(scope.row)" type="text" size="small">立即下架</el-button>
                        <el-button v-else @click="ShangJiaClick(scope.row)" type="text" size="small">立即上架</el-button>
                        <el-button type="text" @click="handleClick(scope.row),dialogFormVisible001=true" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    layout="prev, pager, next"
                    :total="1">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "YizhanComponent",
        data:function () {
            return{
                fileList:[],
                input1: '',
                input2: '',
                allYizhan:{},
                pickerOptions: {
                    shortcuts: []
                },
                value1: '',
                value2: '',
                biaoji:'',

                addressAll: [],   //省市区
                address1:[], //你选择的地址
                xiaoquList:[],
                xiqoquaddressAll:[],
                xiaoquaddress1:[],

                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogFormVisible001:false,
                form: {
                    name: '',
                    name1:'',
                    name2:'',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                courierStationSort: '',
                courierStationStatus:'',
                courierStationOrderCount:'',
                courierStationName:'',
                courierStationId:'',
                addTime:'',
            }
        },
        created() {
            this.getAllProvinceAndCityList();
            this.getxiaoquxinxi();
            this.getAllYinzhan();
            console.log(this.xiqoquaddressAll);
            console.log("--------------------------------");
            // this.getAllYinzhan()
        },
        methods:{
            getAllProvinceAndCityList() {

                // 获取全国所有省份和城市的列表
                var that = this;
                this.$http
                    .get("https://restapi.amap.com/v3/config/district", {
                        // 高德地图的API
                        params: {
                            key: "7f73f1aeafb9ae63dcd6122b87ee79e5", // 这个是申请的 Key，读者自行写入
                            keywords: "中国",
                            subdistrict: 3,
                            extensions: "base",
                        },
                    })
                    .then((response) => {
                        console.log(response.data)


                        for(let i = 0;i<response.data.districts[0].districts.length;i++){
                            let provinceMap = new Map();
                            provinceMap.value = response.data.districts[0].districts[i].adcode;   //区域编号
                            provinceMap.label = response.data.districts[0].districts[i].name;     //省名称
                            provinceMap.children = [];
                            that.addressAll.push(provinceMap);  //添加省份
                            for(let j = 0;j < response.data.districts[0].districts[i].districts.length;j++){
                                let cityMap = new Map()
                                cityMap.value = response.data.districts[0].districts[i].districts[j].adcode;   //区域编号
                                cityMap.label = response.data.districts[0].districts[i].districts[j].name;     //市名称
                                cityMap.children = [];
                                provinceMap.children.push(cityMap); //添加市
                                for(let k = 0;k <response.data.districts[0].districts[i].districts[j].districts.length;k++){
                                    let areaMap = new Map()
                                    areaMap.value = response.data.districts[0].districts[i].districts[j].districts[k].adcode;   //区域编号
                                    areaMap.label = response.data.districts[0].districts[i].districts[j].districts[k].name;     //区县名称
                                    cityMap.children.push(areaMap);   //添加区县
                                }
                            }
                        }
                    }).catch((err)=>{

                });
            },
            getxiaoquxinxi(){
                this.axios.request("/community/communityList", {params:{
                        pageNum:1,
                        pageSize:9999999,
                    }}).then((res)=>{
                    this.xiaoquList = res.data.data.list;
                    for (let i=0;i<this.xiaoquList.length;i++){
                        let str=this.xiaoquList[i].communityName+"("+
                            this.xiaoquList[i].communityProvince+
                            this.xiaoquList[i].communityCity+
                            this.xiaoquList[i].communityDistrict+
                            this.xiaoquList[i].communityAddress+")";
                        this.xiqoquaddressAll.push(str);

                    }
                }).catch((err)=>{

                });
                console.log(this.xiaoquList);
            },
            search () {
                if (this.value1 === null) {
                    this.value1 = "";
                }
                console.log(this.value1[0]);
                this.axios.request("/courierStation/querySearchCourierStationList",{
                    params:{
                        pageNum: 1,
                        pageSize: 10,
                        courierStationName:this.input1,
                        communityName:this.input2,
                        courierStationStatus:"",
                        startTime:this.value1[0],
                        endTime:this.value1[1],
                    }
                }).then((res)=>{
                    this.allYizhan = res.data.data;
                })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            addyizhan(){
                this.zhaoidmax();
                if (this.fileList.length==0){
                    this.fileList.push("无");
                }
                this.axios.post("/courierStation/addCourierStation",{
                    courierStationAddress: this.form.name2,
                courierStationCity:this.address1[1],
                courierStationCommunityId:this.biaoji,
                courierStationDistrict: this.address1[2],
                courierStationImage:this.fileList[0],
                courierStationName:this.form.name1,
                courierStationProvince:this.address1[0] + this.address1[1] + this.address1[2] +this.form.name2
                }).then((res)=>{
                    console.log(this.allYizhan.list);
                }).catch((err)=>{

                });
                alert("添加成功");
                //window.location.reload();
                console.log(typeof (this.allYizhan.list[0].courierStationProvince));
                this.dialogFormVisible = false;
                window.location.reload();

            },
            zhaoidmax(){
                this.axios.request("/community/communityList", {params:{
                        pageNum:1,
                        pageSize:9999999,
                    }}).then((res)=>{
                    this.xiaoquList = res.data.data.list;
                    this.biaoji=this.xiaoquList[0].courierStationId;
                }).catch((err)=>{

                });
            },
            //待修改
            handleClick(row){
                this.address1=[];
                console.log(row);
                this.addTime= row.addTime;
                this.form.name2=row.courierStationAddress;
                //市
                this.address1.push(row.courierStationProvince);
                this.address1.push(row.courierStationCity);
                this.address1.push(row.courierStationDistrict);
                // courierStationCommunityId: 0,
                // courierStationCommunityName: null,

                this.courierStationId=row.courierStationId;
                 this.form.name1=row.courierStationName;
                this.courierStationOrderCount=row.courierStationOrderCount;
                this.courierStationProvince=row.courierStationName;
                this.courierStationSort=row.courierStationSort;
                this.courierStationStatus=row.courierStationStatus;
                switch (this.courierStationStatus) {
                    case "上架":
                        this.courierStationStatus = 1;
                        break;
                    case "下架":
                        this.courierStationStatus=0;
                        break;
                }


            },
            xiugai(){
                // alert(this.courierStationStatus);
                this.axios.post("/courierStation/modifyCourierStation",{
                    addTime: this.addTime,
                    courierStationAddress: this.xiaoquaddress1,
                    // courierStationAddress: '',

                    courierStationCity:this.address1[1] ,
                    courierStationCommunityId: 0,
                    courierStationCommunityName: null,
                    courierStationDistrict: this.address1[2],
                    courierStationId:this.courierStationId,
                    courierStationImage: "",
                    courierStationName:this.form.name1 ,
                    courierStationOrderCount:this.courierStationOrderCount,
                    courierStationProvince: this.address1[0] + this.address1[1] + this.address1[2] +this.form.name2,
                    // courierStationProvince: this.address1[0],
                    courierStationSort: this.courierStationSort,
                    courierStationStatus:this.courierStationStatus,
                    // courierStationStatus:0,

                }).then((res)=>{

                }).catch((err)=>{

                });
                this.dialogFormVisible001=false;
                window.location.reload();
            },
            getAllYinzhan(){
                this.axios.request("/courierStation/querySearchCourierStationList",{params:{
                        pageNum:1,
                        pageSize:10,
                        courierStationName:"",
                        communityName:"",
                        courierStationStatus:"",
                        startTime:"",
                        endTime:"",
                    }}).then((res)=>{
                    this.allYizhan = res.data.data;
                    this.panduan();
                }).catch((error)=>{});
            },
//判断
            panduan(){
                for (let i = 0; i<this.allYizhan.list.length; i++){
                    switch (this.allYizhan.list[i].courierStationStatus) {
                        case 0:
                            this.allYizhan.list[i].courierStationStatus = "下架"
                            // this.isShangORXia = true;
                            break;
                        case 1:
                            this.allYizhan.list[i].courierStationStatus = "上架"
                            // this.isShangORXia = false;
                            break;
                    }
                }
            },
//上架
            ShangJiaClick(obj) {
                this.axios.post('/courierStation/modifyCourierStation',{
                    courierStationId:obj.courierStationId,
                    courierStationStatus:1,
                }).then(response => {
                    this.getAllYinzhan();
                }).catch(error => {
                    console.error('Error fetching data:', error);
                });
            },
//下架
            XiaJiaClick(obj) {
                this.axios.post('/courierStation/modifyCourierStation',{
                    courierStationId:obj.courierStationId,
                    courierStationStatus: 0 ,
                }).then(response => {
                    this.getAllYinzhan();
                }).catch(error => {
                    console.error('Error fetching data:', error);
                });
            },
        },
    }
</script>

<style scoped>
.yizhan{
    height: 300px;
    /*background-color: #009f95;*/
}
    .shuru{
        padding: 15px 10px;
    }
    .timebox{
        padding-bottom: 30px;
    }
</style>